<template>
  <div>
    <h3>子组件</h3>
    <ul>
      <li>{{str}} <button @click="onClickstr">改变</button> </li>
      <li>{{obj}} <button @click="onClickobj">改变</button> </li>
      <li>{{arr}} <button @click="onClickarr">改变</button> </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    str: String,
    obj: Object,
    arr: Array
  },
  methods: {
    onClickstr () {
      this.$emit('update:str', 'new string')
    },
    onClickobj () {
      this.$emit('update:obj', {
        key1: 'new key1',
        key2: 'new key2'
      })
    },
    onClickarr () {
      this.$emit('update:arr', [3, 4])
    }
  }
}
</script>
